<template>
  <div>
    <div class="top">
      <el-page-header @back="goBack">
        <template #content>
          <span style="font-size: 16px"></span>
        </template>
      </el-page-header>
    </div>
    <div class="content">
      <div class="left">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="(item,index) in imgList" :key="index">
            <el-image :src="item"></el-image>
          </el-carousel-item>
        </el-carousel>
        <div style="margin-top: 20px;width: 100%;display: flex;justify-content: center">
          <el-image v-for="item in imgList" :src="item"
                    style="width: 120px;border: 1px solid #eee;margin-left: 15px"></el-image>
        </div>
      </div>
      <div class="right">
        <p style="height: 40px;width: 100%;display: flex;align-items: center;color: #595959;border-bottom: 1px solid #eee">
          <i
              class="el-icon-s-shop"
              style="font-size: 25px;display: block"></i><span style="display: block;font-size: 18px;font-weight: bold">{{
            storeD.assignName
          }}</span></p>
        <div class="p1"><p>整改人：{{ informationD.storeStaffName }}</p>
          <p>审核人：{{ informationD.userName }}</p>
          <p>生成时间：{{ informationD.completeTime }}</p></div>
        <div>
          <p><span style="font-weight: bold">模板</span>：{{ informationD.templateName }}</p>
        </div>
        <div style="margin-top: 10px;">
          <p style="font-size: 13px;font-weight: bold">点检问题:</p>
          <p style="width: 100%;height: 60px;border: 1px solid #eee;margin-top: 5px;padding: 5px;box-sizing: border-box">
            <span style="font-size: 12px">问题项：<a style="color: #ff6a00">1项</a></span>
            <span
                style="font-size: 12px;margin-left: 30px">得分：<a
                style="color: #ff6a00">-{{ rowVal.recordScore }}</a></span>
            <span style="font-size: 12px;display: block;margin-top: 5px">问题名称：{{ rowVal.problemName }}</span>
          </p>
        </div>
        <p style="font-weight: bold;font-size: 13px;margin-top: 15px">整改记录:</p>
        <div  v-for="item in rectifyData" style="position: relative">
          <span style="display: block;width: 5px;height: 5px;border-radius: 50%;border: 1px solid #ff6a00;position: absolute;left: -3px"></span>
          <div style="margin-top: 5px;border-left: 1px solid #eee;padding: 10px;box-sizing: border-box">
            <p class="p2" style="font-size:12px"><span>审核：<a v-if="item.examineState==0" style="color: #13ce66">通过</a><a
                v-if="item.examineState==1" style="color: #ce0e0f">已驳回</a></span></p>
            <p style="font-size:12px;cursor: pointer" @click="changeImg(item.correctionImg)">处理意见：
              <el-input v-model="item.correctionRemark" style="width: 220px" :disabled="true" size="small"></el-input>
            </p>
          </div></div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "unQualifyDetail",
  data() {
    return {
      imgList: [],
      rectifyData: [],
      storeD: {},
      rowVal: {},
      informationD: {}
    }
  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        this.fetchUser(newQuery)
      },
      immediate: true
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    fetchUser(val) {
      if(!val.state) return
      const informationD = JSON.parse(sessionStorage.getItem('patorlD'))
      this.informationD = informationD
      const storeD = JSON.parse(sessionStorage.getItem('storeD'))
      this.storeD = storeD
      const rowVal = JSON.parse(sessionStorage.getItem('rowVal'))
      this.rowVal = rowVal
      this.imgList = rowVal.problemImg
      this.$api.patrolGetCorrectionRecordVo({recordDetailsId: rowVal.recordDetailsId}).then(res => {
        this.rectifyData = res
      })

    },
    changeImg(item){
      if (item) {
        if (item.includes(',')) {
          this.imgList =item.split(',');
        } else {
          this.imgList = [item];
        }
      } else {
        this.imgList = [];
      }
      // console.log(this.imgList,"切换图片")
    }
  }
}
</script>

<style scoped lang="less">
.p1 {
  padding: 10px 0;

  p {
    margin-bottom: 5px;
    font-size: 13px;
    color: #999;
  }
}

.p2 {
  display: flex;
  justify-content: space-between;

  span {
    display: block
  }
}

.content {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    width: 60%;
    margin-top: 50px;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}

.right {
  width: 35%;
  padding: 15px;
  box-sizing: border-box;
  border-left: 1px solid #eee;
}
</style>